<template>
  <header>
    <div class="logo">
    </div>
    <h2 class="title">校园社团管理系统</h2>

    <div class="right" tabindex="0" @blur="toggleBtns(false)">
      <el-icon class="icon1"><Avatar /></el-icon>
      <span class="user">{{ userInfo ? userInfo.userName : 'ccc' }}</span>
      <span ref="arrowRef"  @click="toggleBtns(undefined)">
        <el-icon class="icon2"><ArrowDownBold /></el-icon>
      </span>

      <div class="btn-group" v-show="visible">
        <div class="edit-btn" @click="toggleEditDialog">
          <!-- <el-icon><Edit /></el-icon> -->
          修改密码
        </div>
        <div class="logout-btn" @click="logout">
          <!-- <el-icon><Edit /></el-icon> -->
          退出登录
        </div>
      </div>
    </div>

    <EditDialog
      :editDialogVisible="editDialogVisible"
      @closeEditDialog="toggleEditDialog"
    ></EditDialog>
  </header>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

import EditDialog from "./EditDialog.vue";

const router = useRouter();

const userInfo = reactive(JSON.parse(window.sessionStorage.getItem('userInfo') as string));

const arrowRef = ref(); 

// 按钮组
const visible = ref(false);
const toggleBtns = (show?: boolean) => {
  if (visible.value === false) {
    arrowRef.value.focus();
  }

  if (show !== undefined) {
    visible.value = show;
  } else {
    visible.value = !visible.value;
  }
};

// 修改密码弹窗
const editDialogVisible = ref(false);
const toggleEditDialog = () => {
  editDialogVisible.value = !editDialogVisible.value;
  visible.value = false;
};

const logout = () => {
  toggleBtns();

  ElMessageBox.confirm("退出登录？", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      window.sessionStorage.clear();
      router.push({
        name: "Login",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
};
</script>

<style lang="less" scoped>
@headerHeight: 80px;
header {
  display: flex;
  width: 100vw;
  height: @headerHeight;
  color:#4977af;  
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  // background-color: #444a57;

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    background: #4977af;
    img {
      width: 100px;
    }
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 28px;
  }

  .right {
    position: relative;
    display: flex;
    align-items: center;
    width: 140px;
    // line-height: @headerHeight;

    .icon1 {
      font-size: 36px;
    }

    .icon2 {
      font-size: 20px;
      cursor: pointer;
    }

    .user {
      margin: 0 4px;
    }

    .btn-group {
      position: absolute;
      bottom: 0;
      line-height: 40px;
      padding: 8px 16px;
      transform: translate(0, 100%);
      background-color: #676e80;
      color: #fff;
      cursor: pointer;
      z-index: 10;
    }

    // .edit-btn {
    //   bottom: 0;
    // }

    // .logout-btn {
    //   bottom: 0;
    // }
  }
}
</style>
